<template>
  <div class="tabBox">
    <ul class="tab">
      <li :class="{ active: active == 'new' }" @click="showNew">最新</li>
      <li :class="{ active: active == 'hot' }" @click="showHot">热门</li>
      <li :class="{ active: active == 'recommend' }" @click="showRecommend">
        推荐
      </li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  data: function () {
    return {
      active: "new",
    };
  },
  methods: {
    showNew: function () {
      this.active = "new";
      this.$router.push({ name: "new" });
    },
    showHot: function () {
      this.active = "hot";
      this.$router.push({ name: "hot" });
    },
    showRecommend: function () {
      this.active = "recommend";
      this.$router.push({ name: "recommend" });
    },
  },
};
</script>

<style>
@import "./assets/css/style.css";
</style>
